<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <nav class="navbar bg-white navbar-expand-lg py-4">
        <div class="container-lg">
            <div class="d-lg-none">
            </div>
            <a href="index.html" class="navbar-brand px-3">
                <img src="images/logo2.png" width="170px" alt="">
            </a>
            <button class="navbar-toggler shadow-none border-0 text-red" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                  </svg>
            </button>
            <div class="collapse navbar-collapse justify-content-evenly">
                <form action="" class="w-50">
                    <div class="input-group">
                        <input type="search" name="" id="" class="form-control rounded-0 border-red border-2">
                        <button class="btn btn-red rounded-0">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                          </svg></button>
                    </div>
                </form>
                <a class="btn btn-red rounded-1" href="index.html">返回首页</a>
                <div>
                    <a href="" class="text-decoration-none d-flex align-items-center mb-2">
                        <span class="badge rounded-pill bg-red text-white p-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
                                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
                              </svg>
                        </span>
                        <span class="text-red  ps-2">个人中心</span>
                    </a>
                    <a href="" class="text-decoration-none d-flex align-items-center" id="reg" data-bs-toggle="offcanvas" data-bs-target="#register">
                        <span class="badge rounded-pill bg-red text-white p-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-richtext" viewBox="0 0 16 16">
                                <path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
                                <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                                <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                              </svg>
                        </span>
                        <span class="text-red  ps-2">注册</span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 侧导航开始 -->
    <div class="offcanvas offcanvas-end bg-red text-white" tabindex="-1" id="nav">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title">一点通购物平台</h5>
            <button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <form action="" class="mb-3">
                <div class="input-group input-group-lg">
                    <input type="search" name="" id="" class="form-control  border-2">
                    <button class="btn btn-light">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                      </svg></button>
                </div>
            </form>
            <button class="btn btn-red btn-lg mb-3">返回首页</button>
            <div class="mb-3">
                <a href="" class="text-decoration-none d-flex align-items-center mb-2">
                    <span class="badge rounded-pill bg-light text-red p-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
                                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
                              </svg>
                        </span>
                    <span class="text-white  ps-2">个人中心</span>
                </a>
                <a href="" class="text-decoration-none d-flex align-items-center" data-bs-toggle="offcanvas" data-bs-target="#register">
                    <span class="badge rounded-pill bg-light text-red p-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-richtext" viewBox="0 0 16 16">
                                <path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
                                <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                                <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                              </svg>
                        </span>
                    <span class="text-white  ps-2">注册</span>
                </a>
            </div>
        </div>
    </div>
    <!-- 侧导航结束 -->
    <!-- 注册页面侧导航开始 -->
    <div class="offcanvas-end offcanvas text-red" id="register" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">注册页面</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body ">
            <form action="">
                <div class="my-3">
                    <label for="username1" class="form-label">Username</label>
                    <input type="text" class="form-control border-2 border-red" name="" id="username1">
                    <div class="form-text" id="result1">用户名必须大于2位</div>
                </div>
                <div class="my-3">
                    <label for="email1" class="form-label">Email</label>
                    <input type="email" class="form-control border-2 border-red" name="" id="email1">
                    <div class="form-text" id="result2">密码必须包含数字和字符</div>
                </div>
                <div class="my-3">
                    <label for="pwd1" class="form-label">Password</label>
                    <input type="password" class="form-control border-2 border-red" name="" id="pwd1">
                    <div class="form-text" id="result3">请输入密码</div>
                </div>
                <div class="my-3">
                    <label for="pwd2" class="form-label">RePassword</label>
                    <input type="password" class="form-control border-2 border-red" name="" id="pwd2">
                    <div class="form-text" id="result4">再输入一遍密码</div>
                </div>

                <div class="my-3 text-center">
                    <button type="submit" class="btn btn-red w-100">提交</button>
                </div>
            </form>
        </div>
    </div>
    <!-- 注册页面侧导航结束 -->
    <!-- 红色长条开始 -->
    <div class="w-100 py-2 bg-red">
    </div>
    <!-- 红色长条结束 -->
    <!-- 面包屑导航开始 -->
    <div class="container-lg my-5">
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item "><a href="index.html">首页</a> </li>
                <li class="breadcrumb-item "><a href="list.html">重新选择分类</a> </li>
                <li class="breadcrumb-item  active">手机</li>
            </ol>
        </nav>
    </div>
    <!-- 面包屑导航结束 -->

    <!-- 手机详情开始 -->
    <div class="container-lg my-5">
        <div class="row border  border-secondary-subtle shadow-sm text-muted">
            <div class="col-2 text-center p-2">
                分类 :
            </div>
            <div class="col-5 p-2">
                <ul class="d-flex justify-content-between  m-0 list-unstyled">
                    <li class="text-red fw-bold">
                        手机
                    </li>
                    <li>
                        平板
                    </li>
                    <li>
                        电脑
                    </li>
                    <li>
                        摄影摄像
                    </li>
                    <li>
                        耳机
                    </li>
                </ul>
            </div>
        </div>
        <div class="row border  border-secondary-subtle shadow-sm text-muted border-top-0">
            <div class="col-2 text-center p-2">
                品牌 :
            </div>
            <div class="col-7 p-2">
                <ul class="d-flex justify-content-between  m-0 list-unstyled">
                    <li>
                        苹果
                    </li>
                    <li>
                        三星
                    </li>
                    <li>
                        小米
                    </li>
                    <li>
                        华为
                    </li>
                    <li>
                        vivo
                    </li>
                    <li>
                        oppo
                    </li>
                    <li>
                        魅族
                    </li>
                    <li>
                        荣耀
                    </li>
                </ul>
            </div>
        </div>

        <div class="row justify-content-between my-5">
            <div class="col-3 p-0">
                <div class="border border-2 border-secondary-subtle text-center p-5 shadow-sm">
                    <div class="w-100">
                        <img src="images/phone/iphone1.jpg" class="w-50" alt="">
                    </div>
                    <div class="text-muted small my-3">
                        苹果 iPhone X
                    </div>
                    <div class="fs-5 text-red fw-bold">
                        历史最低价格 <br> &yen;6545元
                    </div>
                </div>
                <div class="text-red mt-3 d-flex align-items-center">
                    <svg t="1701930680267" class="text" viewBox="0 0 1024 1024" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13379" width="30" height="30"><path d="M512 102.4a422.912 422.912 0 1 0 422.570667 423.936A422.570667 422.570667 0 0 0 512 102.4z m97.962667 565.589333A34.133333 34.133333 0 1 1 561.493333 716.8l-166.912-166.912a34.133333 34.133333 0 0 1 0-48.469333l166.912-166.912a34.133333 34.133333 0 0 1 48.469334 0 34.133333 34.133333 0 0 1 0 48.128l-143.018667 143.018666z"  p-id="13380"></path></svg>

                    <a href="list.html" class="text-red fs-5 text-decoration-none ps-2">重新选择机型</a>
                </div>
            </div>

            <div class="col-8 p-0">
                <div class="border border-2 border-secondary-subtle text-center p-5 shadow-sm">
                    <img src="images/phone/bigphone.jpg" class="m-4 w-100" alt="">

                    <div class="text-start fs-5 my-2 p-0">
                        基本信息
                    </div>

                    <div class="w-100 pt-1 bg-secondary-subtle my-3">
                    </div>

                    <div class="text-start text-muted my-2 p-0 fw-bold">
                        型号
                    </div>

                    <div class="w-100 p-0 my-2 d-flex align-items-center">

                        <div class="text-muted p-2 border border-red   w-25 border-2 me-3 bg-danger bg-opacity-10">
                            A1865-全网通
                        </div>
                        <div class=" text-muted p-2 border border-secondary-subtle w-25 border-2">
                            其他
                        </div>

                    </div>

                    <div class="w-100 d-flex my-2 text-start">
                        <div class="text-muted  w-25">
                            储存容量
                        </div>
                        <div class=" text-red">
                            256G
                        </div>
                    </div>
                    <div class="w-100 d-flex my-2 text-start">
                        <div class="text-muted  w-25">
                            购买渠道
                        </div>
                        <div class=" text-red ">
                            大陆国行 (有 “进网许可” 标签)
                        </div>
                    </div>
                    <div class="w-100 d-flex my-2 text-start">
                        <div class="text-muted  w-25">
                            机身颜色
                        </div>
                        <div class=" text-red">
                            黑色
                        </div>
                    </div>
                    <div class="w-100 d-flex my-2 text-start">
                        <div class="text-muted  w-25">
                            保修期时长
                        </div>
                        <div class=" text-red">
                            1年
                        </div>
                    </div>
                    <div class="w-100 pt-1 bg-secondary-subtle my-3">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 手机详情结束 -->

    <!-- 底部开始 -->
    <div class="container-lg my-5">
        <div class="row  d-none d-md-flex">
            <div class="col-3 d-flex align-items-center">
                <div class="w-50 pe-3 text-red">
                    <svg class="w-100">
                        <use xlink:href="images/icon.svg#time"/>
                    </svg>
                </div>
                <div class="w-50">
                    <h5 class="text-dark-emphasis">准时快捷</h5>
                    <p class="small text-muted">验货回收 快速方便</p>
                </div>
            </div>
            <div class="col-3 d-flex align-items-center">
                <div class="w-50 pe-3 text-red">
                    <svg class="w-100">
                        <use xlink:href="images/icon.svg#safe"/>
                    </svg>
                </div>
                <div class="w-50">
                    <h5 class=" text-dark-emphasis"> 安全保障</h5>
                    <p class="small text-muted "> 放心购买 全权保障</p>
                </div>
            </div>
            <div class="col-3 d-flex align-items-center">
                <div class="w-50 pe-3 text-red">
                    <svg class="w-100">
                        <use xlink:href="images/icon.svg#environment"/>
                    </svg>

                </div>
                <div class="w-50">
                    <h5 class="text-dark-emphasis"> 环保处理</h5>
                    <p class="small text-muted "> 综合利用 拒绝污染</p>
                </div>
            </div>
            <div class="col-3 d-flex align-items-center">
                <div class="w-50 pe-3 text-red">
                    <svg class="w-100">
                        <use xlink:href="images/icon.svg#service"/>
                    </svg>
                </div>
                <div class="w-50 ">
                    <h5 class="text-dark-emphasis "> 售后无忧</h5>
                    <p class="small text-muted">7天内无理由退货</p>
                </div>
            </div>
        </div>

        <div class="row d-md-none text-center">
            <div class="col">
                <svg class="w-100 text-red">
                    <use xlink:href="images/icon.svg#time"/>
                </svg>
                <h6 class="text-dark-emphasis">准时快捷</h6>
            </div>
            <div class="col  text-red">
                <svg class="w-100">
                    <use xlink:href="images/icon.svg#safe"/>                    
                </svg>
                <h6 class=" text-dark-emphasis"> 安全保障</h6>
            </div>
            <div class="col  text-red">
                <svg class="w-100">
                    <use xlink:href="images/icon.svg#environment"/>
                </svg>
                <h6 class="text-dark-emphasis"> 环保处理</h6>
            </div>
            <div class="col  text-red">
                <svg class="w-100">
                    <use xlink:href="images/icon.svg#service"/>
                </svg>
                <h6 class="text-dark-emphasis "> 售后无忧</h6>
            </div>
        </div>
        <div class="my-5 text-center small text-muted ">
            Copyright &copy; 2021-2025 ZJFF 版权所有
        </div>
    </div>
    <!-- 底部结束 -->
    <script src="js/popper.min.js "></script>
    <script src="js/bootstrap.js "></script>
    <script>
        var reg = document.getElementById("reg");
    </script>
</body>

</html>